<template>
	<view class="user-coupon-detail" :style="{background:pageColor}">
		<block v-if="detail.id">
			<block
				v-if="(mineInfo.is_admin || mineInfo.mobilenode_auth) && ((detail.group_write_off_auth && detail.is_auth) || options.from_list)">
				<block v-if="[1,2].includes(detail.status)">
					<!-- #ifdef H5 -->
					<view
						@tap="$util.goUrl({url:`/pages/agent-index?agent=${mineInfo.is_admin?1:0}`,openType:`reLaunch`})"
						class="pt-md pb-md flex-y-center f-caption c-title" v-if="!options.from_list">
						<i class="iconfont icon-left mr-sm" style="font-size: 24rpx;"></i>返回上页
					</view>
					<view class="space-lg" v-else></view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="space-lg"></view>
					<!-- #endif -->
					<view class="fill-base pd-lg mb-lg f-paragraph" style="color:#2A2A2A;border-radius:18rpx"
						v-if="(detail.status==1&&!detail.is_pop) || detail.status==2">
						<view class="flex-warp">
							<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
									class="iconfont iconhexiaomendian mr-sm"></i>核销门店:
							</view>
							<view class="flex-1 flex-warp text-bold" style="color:#242424;line-height:40rpx">
								<view class="flex-1">
									{{detail.hx_store_info&&detail.hx_store_info.title?detail.hx_store_info.title:'暂无门店'}}
								</view>
								<view @tap.stop="$refs.show_store_list.open()" class="text-right" style="width:140rpx"
									:style="{color:primaryColor}" v-if="detail.status==1&&detail.store_num*1>1">切换门店
								</view>
							</view>
						</view>
						<view class="flex-warp mt-md">
							<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
									class="iconfont iconhexiaoren mr-sm"></i>核销人:</view>
							<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">
								{{detail.hx_name || '-'}}
							</view>
						</view>
						<view @tap.stop="toHx" class="flex-center f-title c-base radius mt-lg"
							style="width:100%;height:78rpx" :style="{background:primaryColor}" v-if="detail.status==1">
							确认核销
						</view>
						<view class="flex-warp mt-md" v-if="detail.status==2">
							<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
									class="iconfont iconriqi mr-sm"></i>核销时间:</view>
							<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">
								{{detail.use_time || '-'}}
							</view>
						</view>
					</view>
					<view class="list-item rel fill-base">
						<view class="bg abs" :style="{background:primaryColor}"></view>
						<view class="flex-center rel" style="z-index: 2;">
							<view class="item-price flex-center flex-column c-base rel"
								:style="{background:`linear-gradient( 180deg, ${color} 0%, ${primaryColor} 100%)`}">
								<view class="dot-item abs fill-base radius left"></view>
								<view class="dot-item abs fill-base radius right"></view>
								<view class="flex-y-baseline f-sm-title text-bold">¥<view style="font-size:48rpx">
										{{detail.discount}}
									</view>
								</view>
								<view class="mt-sm f-icontext">{{detail.type==0?`满${detail.full}元可用`:'无门槛'}}</view>
							</view>
							<view class="flex-1 ml-lg" style="color:#1F1F1F">
								<view class="f-mini-title c-title text-bold max-450 ellipsis" style="margin: 5rpx 0;">
									{{detail.title}}
								</view>
								<view class="f-icontext mt-md">共{{detail.num}}张</view>
								<view class="flex-y-center f-icontext mt-sm">有效期至<view style="margin-left: 14rpx;">
										{{detail.end_time}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pd-lg mt-lg f-title text-bold" style="color:#1E1E1E">使用规则</view>
					<view class="fill-base pd-lg f-paragraph" style="border-radius: 18rpx;color:#2A2A2A">
						<view class="text-bold" style="color:#242424">使用规则</view>
						<view class="mt-md pb-md b-1px-b">
							<text decode="emsp" style="word-break:break-all;">{{detail.rule}}</text>
						</view>
						<view class="mt-md text-bold" style="color:#242424">优惠详情</view>
						<view class="mt-md pb-md b-1px-b">
							<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
						</view>
						<view class="mt-md text-bold" style="color:#242424">限用{{detail.use_scene?'门店':'服务'}}</view>
						<view class="mt-md">
							<view v-if="!detail.use_scene&&(detail.send_type==3 || detail.service.length==0)">
								{{detail.send_type==3?'所有服务':'-'}}
							</view>
							<span v-for="(item,index) in (detail.use_scene ? detail.store: detail.service)"
								:key="index">{{index==0?'':'、'}}{{item.title}}</span>
						</view>
						<view class="mt-md c-warning">{{detail.admin_id?'仅限部分城市可使用':'通用券'}}</view>
					</view>
					<view class="space-footer"></view>
				</block>
				<abnor type="NOT_AUTH" :tip="[{text: detail.status==3?'卡券已过期':'卡券已作废'}]" :isCenter="true" v-else>
				</abnor>
			</block>
			<abnor type="NOT_AUTH" :tip="[{text: detail.group_write_off_auth && !detail.is_auth?'暂无门店可核销':'当前页面没有权限～'}]"
				:isCenter="true" v-else></abnor>
		</block>

		<uni-popup ref="show_store_list" type="center" :maskClick="false" :zIndex="999">
			<view class="show-store-list fill-base radius-16 rel">
				<i @tap.stop="$refs.show_store_list.close()" class="iconfont icon-add rotate-45 abs"
					v-if="detail.is_close"></i>
				<view class="flex-center f-title text-bold pb-md">选择您的核销门店</view>
				<scroll-view scroll-y @touchmove.stop.prevent style="max-height: 60vh;">
					<view @tap.stop="toCheckItem(index)" class="store-item mt-md radius-16"
						:style="{borderColor:detail.hx_store_info&&(item.store_id == detail.hx_store_info.store_id)?primaryColor:''}"
						v-for="(item,index) in detail.store_select" :key="index">
						<view class="f-mini-title text-bold"
							:style="{color:detail.hx_store_info&&(item.store_id == detail.hx_store_info.store_id)?primaryColor:'#222'}">
							{{item.title}}
						</view>
						<view class="f-icontext mt-sm"
							:style="{color:detail.hx_store_info&&(item.store_id == detail.hx_store_info.store_id)?primaryColor:'#999'}">
							{{item.address || item.title}}
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '',
				detail: {},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			mineInfo: state => state.user.mineInfo,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			options = await this.updateCommonOptions(options)
			options.from_list = options.hasOwnProperty('agent')
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		},
		methods: {
			...mapActions(['updateCommonOptions', 'getConfigInfo', 'getUserInfo', 'getMineInfo']),
			async initIndex(refresh = false) {
				// if (!this.configInfo.id || refresh || !this.userInfo.id) {
				// 	await this.getConfigInfo()
				// }
				await this.getConfigInfo()
				this.color = this.$util.rgbColor(this.primaryColor)
				let code = this.scanRecordId
				// #ifdef H5
				code = this.$util.getQueryString('code')
				// #endif 
				let {
					id: uid = 0
				} = this.userInfo
				if (!code && !uid) {
					await this.getUserInfo()
				}
				await this.getMineInfo()
				let {
					from_list
				} = this.options
				let {
					mobilenode_auth = 0,
						is_admin = 0
				} = this.mineInfo
				if ((!from_list && (is_admin || mobilenode_auth)) || from_list) {
					if (!from_list) {
						this.options.agent = is_admin == 1 ? 1 : 0
					}
					let methodKey = is_admin ? 'agent' : 'admin'
					let methodModel = from_list ? 'couponHxRecordInfo' : 'hxCouponInfo'
					let {
						id
					} = this.options
					let data = await this.$api[methodKey][methodModel]({
						id
					})
					if (!from_list) {
						let {
							is_pop,
							is_auth,
							group_write_off_auth,
							hx_store_info = {
								store_id: 0
							},
							store_select
						} = data
						let {
							store_id = 0
						} = hx_store_info
						let ids = store_select.map(item => {
							return item.store_id
						})
						data.is_close = store_id && ids.length > 0 && ids.includes(store_id)
						if (group_write_off_auth && is_pop && is_auth) {
							this.$refs.show_store_list.open()
						}
					}
					this.detail = data
				} else {
					this.detail = {
						id: 1
					}
				}
				this.$util.hideAll()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor,
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			async toCheckItem(index) {
				let {
					id: store_id,
					is_check
				} = this.detail.store_select[index]
				let methodKey = this.options.agent ? 'agent' : 'admin'
				await this.$api[methodKey].selectStore({
					store_id
				})
				this.$refs.show_store_list.close()
				this.initRefresh()
			},
			async toHx() {
				let {
					id,
					agent = 0
				} = this.options
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let methodKey = agent ? 'agent' : 'admin'
					await this.$api[methodKey].hxCoupon({
						id
					})
					this.lockTap = false
					this.$util.hideAll()
					this.$util.showToast({
						title: `核销成功`
					})
					setTimeout(() => {
						this.initRefresh()
					}, 2000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>


<style lang="scss">
	.user-coupon-detail {
		padding: 0 20rpx;

		.qr-code {
			width: 320rpx;
			height: 320rpx;
		}

		.list-item {
			height: 190rpx;
			border-radius: 18rpx;

			.bg {
				opacity: 0.1;
				border-radius: 18rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}


			.item-price {
				width: 200rpx;
				height: 190rpx;
				border-radius: 18rpx;
				overflow: hidden;

				.dot-item {
					width: 24rpx;
					height: 24rpx;
					top: 83rpx;
				}

				.dot-item.left {
					left: -12rpx;
				}

				.dot-item.right {
					right: -12rpx;
				}
			}

		}

		.b-1px-b::after {
			color: #EAEAEA
		}

		.show-store-list {
			width: 690rpx;
			padding: 38rpx 30rpx 49rpx 30rpx;

			.icon-add {
				top: 40rpx;
				right: 30rpx;
				color: #6A6A6A;
			}

			.store-item {
				padding: 20rpx 30rpx;
				background: #F6F7FB;
				border: 1rpx solid #F6F7FB;

				.f-mini-title {
					line-height: 44rpx;
				}

				.f-icontext {
					line-height: 32rpx;
				}
			}
		}
	}
</style>